<template>
  <view class="custom-header" :style="headerStyle"> </view>
</template>
  
<script>
import { getCustomNavHeight } from "@/utils/safeArea.js";

export default {
  name: "CustomHeader",
  props: {
    backgroundColor: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      customNavHeight: 44, // 默认高度
    };
  },
  computed: {
    headerStyle() {
      const style = {
        height: this.customNavHeight + "px",
      };

      // 如果传入了背景颜色，则使用传入的背景颜色
      if (this.backgroundColor) {
        style.background = this.backgroundColor;
      }

      return style;
    },
    // 判断是否使用了自定义背景
    useCustomBackground() {
      return !!this.backgroundColor;
    },
  },
  mounted() {
    // 在组件挂载时计算并设置导航栏高度
    this.calculateNavHeight();
  },
  methods: {
    calculateNavHeight() {
      try {
        const height = getCustomNavHeight();
        this.customNavHeight = height;
      } catch (error) {
        console.error("计算导航栏高度失败:", error);
      }
    },
  },
};
</script>
  
<style lang="scss" scoped>
.custom-header {
  background: linear-gradient(to right, #95e3e4, #fcd5c9);
  width: 100%;
  z-index: 999;
  position: relative;
}

// 当有背景颜色时，移除默认的渐变背景
.custom-header[style*="background"] {
  background: none;
}

.custom-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent, white);
}

// 当使用自定义背景时，移除::after伪元素的效果
.custom-header[style*="background"]::after {
  display: none;
}
</style>